<template>
  <div class="playerContent">
    <div class="title">
      <div class="line"></div>
      <div class="name">球员管理</div>
      <div class="add" @click="handleAdd">新增球员</div>
      <div class="btn down" @click="handleDownload">下载模版</div>
      <div class="btn import" @click="handleImport">导入</div>
      <div class="btn" @click="handleExport">导出</div>
      <input type="file" hidden ref="fileRef" @change="fileChange" />
    </div>
    <div class="search">
      <div class="inputItem">
        <span>姓名</span>
        <CommonInput v-model="playerForm.name" placeholder="请输入球员名称" />
      </div>
      <div class="inputItem">
        <span>年级</span>
        <CommonSelect v-model="playerForm.grade" placeholder="请选择年级" :options="levelOptions" />
      </div>
      <div class="btns">
        <div class="btn searchBtn" @click="handleSearch">查询</div>
        <div class="btn resetBtn" @click="handleReset">重置</div>
        <div class="btn resetBtn" @click="handleDel">删除</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage style="flex: 1" :columns="playerColumns" :pagination="pageInfo" :tableData="tableData">
        <template #avatar="{ row }">
          <!-- <img :src="row.profilePictureBase64Data" alt=""> -->
          <el-avatar :size="'small'" :src="row.profilePictureBase64Data" ></el-avatar>
        </template>
        <template #edit="{ row }">
          <span @click="handleEdit(row)" class="edit">编辑</span>
        </template>
      </CommonTablePage>
    </div>
    <changeDialog v-if="changeDialog" :changeDialog.sync="changeDialog" :curRow="curRow" @changePlayer="changePlayer">
    </changeDialog>
  </div>
</template>
<script>
import { playerColumns } from "./column.js";
import { viewMinix } from "@/minix/viewMinix.js";
import changeDialog from "@/views/playerManage/components/changeDialog";
import { addPlayer, editPlayer, getTablePage, delPlayer } from "@/api/playerManage";
export default {
  components: {
    changeDialog,
  },
  mixins: [viewMinix],
  data() {
    return {
      viewName: "playerManage",
      curRow: {},
      changeDialog: false,
      playerColumns,
      tableData: [
        // {
        //   id: "1",
        //   name: "张三",
        //   age: "23",
        //   height: "187",
        //   weight: "70kg",
        //   phone: "13018777666",
        //   grade: "大一",
        //   joinTime: "2021-09-09",
        // },
      ],
      playerForm: {
        name: "",
        grade: "",
      },
      levelOptions: [
        {
          label: "大一",
          value: "大一",
        },
        {
          label: "大二",
          value: "大二",
        },
        {
          label: "大三",
          value: "大三",
        },
        {
          label: "大四",
          value: "大四",
        },
      ],
      rowList: [],
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    async changePlayer(val) {
      let data = {
        ...val
      }
      if (data.id) {
        const res = await editPlayer(data)
        console.log(res, 'res');
        if (res.code == 200) {
          this.getTableData()
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.changeDialog = false
        }
      } else {
        const res = await addPlayer(data)
        console.log(res, 'res');
        if (res.code == 200) {
          this.getTableData()
          this.$message({
            type: "success",
            message: "新增成功!",
          });
          this.changeDialog = false
        }
      }


    },
    handleDownload() {
      const link = document.createElement('a')
      link.href = './static/playerXlsx.xlsx'
      link.download = '球员导入模版.xlsx'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    async getTableData() {
      let data = {
        page: {
          ...this.pageInfo,
        },
        param: {
          name: this.playerForm.name,
          grade: this.playerForm.grade,
        },
      }
      const res = await getTablePage(data)
      console.log(res, 'res');
      if (res.code == 200) {
        this.tableData = res.data.records

        this.pageInfo.total = res.data.total * 1
      }

    },
    handleReset() {
      this.playerForm.name = "";
      this.playerForm.grade = "";
      this.getTableData();
    },
    selRows(rows) {
      this.rowList = rows;
      console.log(this.rowList, 'rowList');

    },
    handleDel() {
      console.log(this.rowList, 'rowList');
      if (this.rowList.length < 1) {
        return this.$message({
          type: "error",
          message: "请勾选球员信息!",
        });
      }
      const ids = this.rowList.map((item) => item.id);
      this.$confirm("此操作将永久删除该球员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const delPromiseArr = ids.map((id) => delPlayer({
            id,
          }));
          await Promise.all(delPromiseArr);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableData();

        })
        .catch(() => { });
    },
    handleAdd() {
      this.curRow = { id: "" };
      this.changeDialog = true;
    },
    handleEdit(row) {
      this.curRow = row;
      console.log(this.curRow);
      this.changeDialog = true;
    },
  },
};
</script>

<style lang="less" scoped>
.playerContent {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;

    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .down,
    .import {
      margin-right: 10px;
    }

    .add {
      margin-left: auto;

      margin-right: 16px;
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      margin-right: 10px;

      span {
        width: 50px;
        display: flex;
        align-items: center;
      }
    }

    .btns {
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        display: flex;
        font-size: 14px;
        background-color: #fc6c09;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .searchBtn {
        margin-right: 16px;
      }

      .resetBtn {
        margin-right: 16px;
      }
    }
  }

  .content {
    flex: 1;
    margin-top: 20px;
    display: flex;
    background-color: #fff;
    padding: 15px 10px 10px 30px;

    .edit {
      color: #fc6c09;
      cursor: pointer;
    }
  }
}
</style>
